<template>
    <div class="base-page">
        <div class="left org" v-show="viewList === true">
            <select-org @select="onSelectOrg" />
        </div>
        <!-- 列表 -->
        <div class="right" v-show="viewList === true">
            <div class="e-table">
                <div class="top">
                    <div class="left">
                        <div class="left-btn">
                            <el-button type="primary" size="mini"
                                @click="addData"
                                class="btn-greenYellow"
                                :disabled="!this.formData.orgId"
                            >新增</el-button>
                            <span class="prompt" v-if="!this.formData.orgId">请先选择机构</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="e-table" :style="{width: rightTableWidth}">
                <el-table
                    :height="rightTableHeight"
                    :data="tableData"
                    border
                    :cell-class-name="cellClsNm"
                    @cell-mouse-enter="cellMouseEnter"
                    @cell-mouse-leave="cellMouseLeave"
                    highlight-current-row
                    @current-change="handleCurrentChange"
                    class="table"
                    ref="tableRef"
                    v-sortTable="{ 'tableData': tableData, '_this': this, 'ref': 'tableRef' }"
                >
                    <el-table-column show-overflow-tooltip fixed label="操作" width="200">
                        <template slot-scope="{ row }">
                            <div class="oparation_box">
                                <i
                                    class="el-icon-edit"
                                    style="font-size: 24px"
                                    :class="{
                                        'icon-edit-active-color': MouseEnterId == row.quataId
                                    }"
                                    @click="tableDbEdit(row)"
                                ></i>
                                 <i
                                    class="el-icon-delete"
                                    style="font-size: 24px"
                                    :class="{
                                        'icon-delete-active-color': MouseEnterId == row.quataId
                                    }"
                                    @click="tableDbDelete(row)"
                                ></i>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="timeUnit" label="计时单位" min-width="200" show-overflow-tooltip>
                        <template slot-scope="{ row }">
                            <span>{{getTimeUint(row)}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="leaseTime" label="租用时间" width="300" show-overflow-tooltip> </el-table-column>
                    <el-table-column prop="leaseAmount" label="租赁金额" width="300" show-overflow-tooltip> </el-table-column>
                </el-table>
            </div>
            <!-- 分页组件 -->
            <Pagination
                :total="paginationInfo.total"
                :pageSize.sync="paginationInfo.pageSize"
                :currentPage.sync="paginationInfo.currentPage"
                @currentChange="getTableData"
                @sizeChange="getTableData"
            />
        </div>
        <!-- 新增编辑界面 -->
        <div class="right" v-if="viewList === 'add' || viewList === 'edit'">
            <div class="e-form" style="padding: 0 10px 10px;">
                <div class="tabs-title">设备临租限额信息</div>
                <el-form ref="form" :model="formDataDetail" :rules="rules" label-width="150px">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="计时单位：">
                                <el-select
                                    v-model="formDataDetail.timeUnit"
                                    placeholder="请选择"
                                >
                                    <el-option
                                        v-for="(item, index) in timeUnitList"
                                        :key="index"
                                        :label="item.label"
                                        :value="item.value"
                                    >
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="租用时间：" prop="leaseTime">
                                <el-input v-model="formDataDetail.leaseTime"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="租赁金额：" prop="leaseAmount">
                              <el-input v-model="formDataDetail.leaseAmount"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <div class="footer">
                <div class="right-btn">
                    <el-button type="primary" size="mini"
                        @click="onSave"
                    >保存</el-button>
                    <el-button type="default" size="mini"
                        @click="onCancel"
                    >取消</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import '@/utils/jquery.scrollTo.min'
import SelectOrg from '@/components/selectOrg'
import Pagination from '@/components/pagination/pagination'
import { debounce, advanceSearch, showLoading, hideLoading } from '@/utils/common'
import { mapState } from 'vuex'
import { equipTemporaryList, addEquipTemporary, updataEquipTemporary, deleteEquipTemporary } from '@/api/base/equip'
import { isNum } from '@/utils/rules'
export default {
    components: {
        Pagination,
        SelectOrg,
    },
    computed: {
        ...mapState({
            userInfo: state => state.userInfo,
            timeUnitList: state => state.equip.equipData.timeUnitList//计时单位
        }),
        // 列表宽度
        rightTableWidth () {
            return (this.screenWidth - 416) + 'px'
        },
        // 列表高度
        rightTableHeight () {
            if (this.paginationInfo.total > 0) {
                return this.screenHeight - 170
            } else {
                return this.screenHeight - 118
            }
        },
        // 分配用户、分配岗位列表宽度
        rightTableWidth2 () {
            return (this.screenWidth - 416) + 'px'
        },
        rightTableHeight2 () {
            return this.screenHeight - 210
        },
        getTimeUint () {
            return data => {
                let val = null
                if(data.timeUnit) {
                    val = this.timeUnitList.find(x=>x.value === data.timeUnit)
                }
                return val?.label || ''
            }
        }
    },
    data () {
        return {
            viewList: true, // 显示列表还是编辑界面: true 显示列表 false 显示编辑界面
            searchKey: '',
            currentRow: null,
            paginationInfo: {
                total: 0,
                pageSize: 20,
                currentPage: 1,
            },
            tableData: [],
            formData: {
                'keyword': '',
                'limit': 0,
                'orgId': '',
                'page': 0,
                'states': []
            },
            formDataDetail: {},
            MouseEnterId: 0,
            screenWidth: 0,
            screenHeight: 0,
            rules: {
                leaseTime: [
                    { required: true, message: '请输入租赁时间', trigger: 'blur' },
                    { validator: isNum, trigger: 'blur' },
                ],
                leaseAmount: [
                    { required: true, message: '请输入租赁金额', trigger: 'blur' },
                    { validator: isNum, trigger: 'blur' },
                ],
            },
        }
    },
    mounted () {
        // 获取屏幕宽高
        this.getScreenInfo()
        window.addEventListener('resize', debounce(this.getScreenInfo))
        this.getDicValue()
    },
    methods: {
        //获取当前使用的字典
        getDicValue () {
            this.$store.dispatch('equip/setTimeUnitList')//更新计时单位
        },
        async getTableData () {
            showLoading()
            try {
                this.formData.limit = this.paginationInfo.pageSize
                this.formData.page = this.paginationInfo.currentPage
                const resData = await equipTemporaryList(this.formData)
                this.tableData = resData.list
                this.paginationInfo.total = resData.totalCount
                hideLoading()
            } catch (error) {
                hideLoading()
            }
        },
        onSelectOrg (val) {
            this.paginationInfo.currentPage = 1
            this.formData = {
                ...this.formData,
                ...val,
            }
            this.getTableData()
        },
        addData () {
            if(!this.formData.orgId) {
                this.clientPop('info', '请选择机构')
            }
            else{
                this.formDataDetail = {
                    'gmtCreate': '',
                    'gmtModified': '',
                    'leaseAmount': 0,
                    'leaseTime': 0,
                    'orgId': this.formData.orgId,
                    'orgName': this.formData.orgName,
                    'quataId': '',
                    'timeUnit': this.timeUnitList[0].value
                }
                this.viewList = 'add'
            }

        },
        tableDbEdit (row) {
            this.formDataDetail = this._.clone(row)
            this.viewList = 'edit'
        },
        cellClsNm ({ column }) {
            if (column.label === '') {
                return 'fixed-left'
            }
        },
        cellMouseEnter (row) {
            this.MouseEnterId = row.quataId
        },
        cellMouseLeave () {
            this.MouseEnterId = 0
        },
        onSearch (e) {
            console.log('e', e)
            let searchKey = e
            if (typeof e === 'object') {
                searchKey = this.searchKey
            }
            this.paginationInfo.currentPage = 1
            this.formData.keyword = searchKey
            this.getTableData()
        },
        onAdvanceSearch () {
            advanceSearch().then(res => {
                alert(JSON.stringify(res))
            })
        },
        goList () {
            this.viewList = true
        },
        handleCurrentChange (val) {
            console.log('handleCurrentChange: ', val)
            this.currentRow = val
        },
        onCancel () {
            this.viewList = true
        },
        getScreenInfo () {
            let screenWidth = document.documentElement.clientWidth || document.body.clientWidth
            let screenHeight = document.documentElement.clientHeight || document.body.clientHeight
            this.screenWidth = screenWidth
            this.screenHeight = screenHeight
        },
        goCategoryManage () {
            this.$router.push('/categoryManage')
        },
        onSave (data) {
            if(!data) return
            const resultExec = () => {
                this.viewList = true
                this.paginationInfo.currentPage = 1
                this.getTableData()
            }
            if(this.viewList === 'add') {
                addEquipTemporary(this.formDataDetail).then(() => {
                    this.clientPop('suc', '保存成功', resultExec)
                })
            }else if(this.viewList === 'edit') {
                updataEquipTemporary(this.formDataDetail).then(() => {
                    this.clientPop('suc', '保存成功', resultExec)
                })
            }
        },
        tableDbDelete (row) {
            this.clientPop('err', this.oneDeleteErr, ()=>{
                deleteEquipTemporary({ leaseLimitIdList: row.quataId }).then(()=>{
                    this.clientPop('suc', '删除成功', ()=>{ this.viewList = true;this.paginationInfo.currentPage = 1;this.getTableData() })
                })
            })
        },
    }
}
</script>

<style lang="scss" scoped>
</style>
